<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <style>
        html, body {
            background-color: #f8f8f8;
        }
        #header {
            height: 48px;
            line-height: 48px;
            background-color: #e62442;
            color: #fff;
            text-align: center;
            font-size: 17px;
        }
        .nav {
            border-bottom: 1px solid #dfdfdf;
            background-color: #ffffff;
            margin-bottom: 6px;
            position: relative;
            display: none;
        }
        .nav ul {
            overflow: hidden;
        }
        .nav ul li {
            width: 33.333333%;
            height: 44px;
            line-height: 44px;
            float: left;
            color: #999;
            font-size: 14px;
            text-align: center;
            position: relative
        }
        .nav ul li span {
            width: 1px;
            height: 17px;
            display: block;
            background-color: #999;
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
        .nav ul li.active {
            color: #333;
            font-weight: bold;
        }
        .nav .line_wrap {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
        }
        .nav .line_wrap .line {
            width: 75px;
            height: 3px;
            background-color: #e62442;
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li class="active" tapmode onclick="fnClick(0);">未使用<span></span></li>
            <li tapmode onclick="fnClick(1);">已使用<span></span></li>
            <li tapmode onclick="fnClick(2);">已过期</li>
        </ul>
        <div class="line_wrap">
            <div class="line"></div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.js"></script>
<script type="text/javascript">
    apiready = function(){
        height = api.pageParam.height;
        api.addEventListener({
            name: 'openCouponEvent'
        }, function(ret, err) {
            if (ret) {
                user = $api.getStorage('user_data');
                height = ret.value.height;
                if(user) {
                    $('.nav').show();
                    fnOpenGroup(height);
                }else {
                    fnOpenLogin();
                }
            } 
        });

        // api.addEventListener({
        //     name: 'loginEvent'
        // }, function(ret, err) {
        //     if (ret) {
        //         $('.nav').show();
        //         fnOpenGroup(height);
        //     }
        // });
    };

    function fnOpenGroup(height) {
        api.openFrameGroup({
            name: 'couponFrame',
            rect: {
                 x: 0, 
                 y: height + $('.nav').height(), 
                 w: 'auto',
                 h: api.winHeight - height - $('.nav').height() - 50
            },
            scrollEnabled: true,
            frames: [{
                name: 'coupon_not_used_frame', 
                url: 'coupon_not_used_frame.html',
                bounces: true
            },{
                name: 'coupon_used_frame', 
                url: 'coupon_used_frame.html',
                bounces: true
            },{
                name: 'coupon_expired_frame', 
                url: 'coupon_expired_frame.html',
                bounces: true
            }]
        }, function(ret, err) {
            if (ret) {
                fnChange(ret.index);
            } 
        });
    }

    function fnClick(_index) {
        fnChange(_index);
        api.setFrameGroupIndex({
            name: 'couponFrame',
            index: _index,
        });
    }

    function fnChange(_index) {
        if (!isNaN(_index)) {
            this_ = $('.nav ul li').eq(_index);
        }
        $('.nav ul li').removeClass('active');
        $(this_).addClass('active');
        var left = $(this_).offset().left + ($(this_).width() - $('.line').width()) / 2;
        $('.line').css({
            'transform': 'translateX(' + left + 'px)',
            '-webkit-transform': 'translateX(' + left + 'px)',
            'transition': 'transform 300ms ease-in-out',
            '-webkit-transition': '-webkit-transform 300ms ease-in-out',
        });
    }

    function fnOpenLogin() {
        api.openFrame({
            name: 'nologin_frame',
            url: 'nologin_frame.html',
            rect: {
                x: 0,
                y: height,
                w: 'auto',
                h: api.winHeight - height - 50
            },
            bounces: false
        });
    }
</script>
</html>